<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数据分析中心 - 线框图原型</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      background: #f6f7fb;
      font-family: Arial, sans-serif;
    }
    .sidebar {
      position: fixed;
      left: 0;
      top: 0;
      width: 220px;
      height: 100vh;
      background: #232946;
      color: #fff;
      display: flex;
      flex-direction: column;
      padding: 24px 0 0 0;
      box-sizing: border-box;
    }
    .sidebar .logo {
      font-size: 1.5rem;
      font-weight: bold;
      text-align: center;
      margin-bottom: 32px;
      letter-spacing: 2px;
    }
    .sidebar .menu {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 0 0 0 24px;
    }
    .sidebar .menu .menu-item {
      padding: 10px 0;
      border-radius: 6px 0 0 6px;
      cursor: pointer;
      color: #bfc8e2;
      font-size: 1rem;
    }
    .sidebar .menu .menu-item.active {
      background: #e7eaf6;
      color: #232946;
      font-weight: bold;
    }
    .main {
      margin-left: 220px;
      min-height: 100vh;
      background: #f6f7fb;
    }
    .header {
      padding: 32px 32px 0 32px;
      font-size: 2rem;
      font-weight: bold;
      color: #232946;
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .header .desc {
      font-size: 1.1rem;
      color: #888;
      font-weight: normal;
      margin-left: 16px;
    }
    .refresh-btn {
      margin-left: auto;
      background: #6a9cfb;
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 10px 20px;
      font-size: 1rem;
      font-weight: bold;
      cursor: pointer;
    }
    .stats-row {
      display: flex;
      gap: 24px;
      margin: 32px 32px 0 32px;
    }
    .stat-card {
      flex: 1;
      background: #fff;
      border-radius: 18px;
      padding: 24px 24px 16px 24px;
      text-align: left;
      font-size: 1.3rem;
      font-weight: bold;
      box-shadow: 0 2px 8px rgba(80, 60, 180, 0.06);
      position: relative;
      min-width: 0;
    }
    .stat-card .desc {
      font-size: 1rem;
      font-weight: normal;
      margin-top: 8px;
      color: #888;
    }
    .trend-section {
      background: #fff;
      border-radius: 18px;
      box-shadow: 0 2px 8px rgba(80, 60, 180, 0.06);
      margin: 32px 32px 0 32px;
      padding: 24px;
    }
    .trend-title {
      font-size: 1.1rem;
      font-weight: bold;
      margin-bottom: 8px;
    }
    .tab-row {
      display: flex;
      gap: 16px;
      margin-bottom: 12px;
      justify-content: flex-end;
    }
    .tab-btn {
      background: #f3f0fa;
      color: #a084ee;
      border: none;
      border-radius: 6px;
      padding: 6px 14px;
      font-size: 0.95rem;
      cursor: pointer;
    }
    .tab-btn.active {
      background: #a084ee;
      color: #fff;
    }
    .trend-chart {
      height: 220px;
      background: #f6f7fb;
      border-radius: 8px;
      margin-top: 8px;
    }
  </style>
</head>
<body>
  <div class="sidebar">
    <div class="logo">SG3L</div>
    <div class="menu">
      <div class="menu-item active">分析页</div>
      <div class="menu-item">仪表盘</div>
      <div class="menu-item">监控页</div>
      <div class="menu-item">模板中心</div>
      <div class="menu-item">组件中心</div>
      <div class="menu-item">日志中心</div>
      <div class="menu-item">权限管理</div>
      <div class="menu-item">用户管理</div>
      <div class="menu-item">角色管理</div>
    </div>
  </div>
  <div class="main">
    <div class="header">
      数据分析中心
      <span class="desc">系统运行和业务数据的详细分析</span>
      <button class="refresh-btn">刷新数据</button>
    </div>
    <div style="text-align:center;margin:16px 0 0 0;"><span style="background:#e6f9e6;color:#3ecf8e;padding:4px 16px;border-radius:8px;font-size:1rem;">数据已刷新</span></div>
    <div class="stats-row">
      <div class="stat-card">
        <div style="font-size:2rem;">25.8K</div>
        <div class="desc">日访问量<br><span style="color:#3ecf8e;font-size:0.98rem;">↑ 12.5% 较昨日</span></div>
      </div>
      <div class="stat-card">
        <div style="font-size:2rem;">1.3K</div>
        <div class="desc">新增用户<br><span style="color:#3ecf8e;font-size:0.98rem;">↑ 5.2% 较昨日</span></div>
      </div>
      <div class="stat-card">
        <div style="font-size:2rem;">6.8K</div>
        <div class="desc">订单总数<br><span style="color:#f56c6c;font-size:0.98rem;">↓ 2.8% 较昨日</span></div>
      </div>
      <div class="stat-card">
        <div style="font-size:2rem;">127.6K元</div>
        <div class="desc">总营收<br><span style="color:#f56c6c;font-size:0.98rem;">↑ 8.9% 较昨日</span></div>
      </div>
    </div>
    <div class="trend-section">
      <div class="trend-title">系统性能趋势</div>
      <div class="tab-row">
        <button class="tab-btn active">访问量</button>
        <button class="tab-btn">用户数</button>
        <button class="tab-btn">转化率</button>
        <button class="tab-btn">营收</button>
      </div>
      <div class="trend-chart"></div>
    </div>
  </div>
</body>
</html>
